<!DOCTYPE html>
<html>
<head>
    <title>Stacked Blocks Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Fill background with white
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // --- Style settings ---
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 3;
        // Use a font similar to the original image (bold, monospaced)
        ctx.font = 'bold 32px "Courier New", monospace';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        // --- Define dimensions and positions ---
        const centerX = canvas.width / 2;
        const tableY = 350;

        // Block C dimensions
        const cWidth = 320;
        const cHeight = 80;
        const cX = centerX - cWidth / 2;
        const cY = tableY - cHeight;

        // Block B dimensions
        const bWidth = 220;
        const bHeight = 70;
        const bX = centerX - bWidth / 2;
        const bY = cY - bHeight;

        // Block A dimensions
        const aWidth = 140;
        const aHeight = 60;
        const aX = centerX - aWidth / 2;
        const aY = bY - aHeight;

        // --- Draw the objects ---

        // Draw the table surface
        ctx.beginPath();
        ctx.moveTo(40, tableY);
        ctx.lineTo(canvas.width - 40, tableY);
        ctx.stroke();

        // Draw Block C
        ctx.strokeRect(cX, cY, cWidth, cHeight);
        ctx.fillText('13.0 N', centerX, cY + cHeight / 2);
        // Draw label C (adjusting textAlign for left alignment)
        ctx.textAlign = 'right';
        ctx.fillText('C', cX - 25, cY + cHeight / 2);

        // Draw Block B
        ctx.strokeRect(bX, bY, bWidth, bHeight);
        ctx.textAlign = 'center'; // Reset alignment for centered text
        ctx.fillText('7.0 N', centerX, bY + bHeight / 2);
        // Draw label B
        ctx.textAlign = 'right';
        ctx.fillText('B', bX - 25, bY + bHeight / 2);

        // Draw Block A
        ctx.strokeRect(aX, aY, aWidth, aHeight);
        ctx.textAlign = 'center'; // Reset alignment for centered text
        ctx.fillText('5.0 N', centerX, aY + aHeight / 2);
        // Draw label A
        ctx.textAlign = 'right';
        ctx.fillText('A', aX - 25, aY + aHeight / 2);

    </script>
</body>
</html>